<template>
    <div>
        <div style="padding: 10px">
            <el-select v-model="value" placeholder="请选择" size="mini" @change="getPoints">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <baidu-map class="bm-view"  :zoom="13" @ready="initMap" center="哈密市"
            :scroll-wheel-zoom="true">
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bml-marker-clusterer :averageCenter="true">
                <bm-marker v-for="(item,index) in enterPriseList" :key="index"
                           :position="{lng:item.longitude,lat:item.latitude}" :title="'企业：'+item.enterpriseName"
                           @click="clickMarker(item)" >
                </bm-marker>
            </bml-marker-clusterer>
            <bm-info-window
                    :show="show"
                    :position="position"
                    @close="infoWindowClose"
                    @open="infoWindowOpen">
                    企业名称：{{enterPriseInfo.enterpriseName}}<br>
                    负责人：{{enterPriseInfo.name}}<br>
                    联系电话：{{enterPriseInfo.enterpriseTel}}<br>
                    企业设备数量：{{enterPriseInfo.deviceTotal}}<br>
                    详细地址：{{enterPriseInfo.address}}<br>
            </bm-info-window>
            <bml-marker-clusterer :averageCenter="true">
                <bm-marker v-for="(item,index) in equipmentList" :key="index"
                           :position="{lng:item.longitude,lat:item.latitude}" :title="'设备：'+item.name"
                           @click="clickMarkerEquipment(item)" >
                </bm-marker>
            </bml-marker-clusterer>
            <bm-info-window
                    :show="showEquipment"
                    :position="equipmentPosition"
                    @close="equipmentInfoWindowClose"
                    @open="equipmentInfoWindowOpen">
                设备名称：{{equipmentInfo.name}}<br>
                所属企业：{{equipmentInfo.enterpriseName}}<br>
                所属建筑：{{equipmentInfo.buildName}}<br>
                所在楼层：{{equipmentInfo.floor}}<br>
                设备状态：{{equipmentInfo.status | equipmentStatus}}<br>
            </bm-info-window>
        </baidu-map>
    </div>
</template>

<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
import {getInEnterpriseList} from "@/api/enterprise";
import {getEquipmentList} from "@/api/equipment";
export default {
    name: "commandMap",
    components: {
        BmlMarkerClusterer
    },
    data(){
        return{
            BMap:[],
            enterPrisePoints: [],
            devicePoints:[],
            userPoints:[],
            enterPriseList:[],
            equipmentList:[],
            deviceList:[],
            userList:[],
            enterWindowInfo:{},
            position:{},
            equipmentPosition:{},
            enterPriseInfo: {},
            equipmentInfo: {},
            options: [{
                value: 1,
                label: '企业'
            }, {
                value: 2,
                label: '设备'
            }],
            value: 1,
            show:false,
            showEquipment:false
        }
    },
    mounted() {
        this.getEnterPriseList()
    },
    methods:{
        initMap ({BMap,map}) {

        },
        createMap(){

        },
        test(){
            const points = [];
            for (var i = 0; i < 1000; i++) {
                const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
                points.push(position)
            }
            this.enterPrisePoints = points
        },
        //获取设备坐标点信息
        getPoints(val){
            if (val==1){
                this.getEnterPriseList()
                this.equipmentList = []
                this.show = false
                this.showEquipment = false
            }else {
                this.getEquipmentList()
                this.enterPriseList = []
                this.show = false
                this.showEquipment = false
            }
        },
        clickMarker (val) {
            this.position = { lng:val.longitude,lat:val.latitude };
            this.enterPriseInfo=val;
            this.content=val.enterpriseName;
            this.show = true;
        },
        clickMarkerEquipment (val) {
            this.equipmentPosition = { lng:val.longitude,lat:val.latitude };
            this.equipmentInfo=val;
            this.content=val.name;
            this.showEquipment = true;
        },
        //获取企业信息列表
        getEnterPriseList(){
            getInEnterpriseList({deleted:false}).then(res=>{
                console.log(res)
                this.enterPriseList = res.data
            })
        },
        //获取设备信息列表
        getEquipmentList(){
            getEquipmentList({deleted:false}).then(res=>{
                console.log(res)
                this.equipmentList = res.data
            })
        },
        infoWindowOpen() {
            this.show = true;
        },
        infoWindowClose() {
            this.show = false;
        },
        equipmentInfoWindowOpen() {
            this.showEquipment = true;
        },
        equipmentInfoWindowClose() {
            this.showEquipment = false;
        },

    },

}
</script>

<style scoped>
.bm-view {
    width: 100%;
    height: calc(100vh - 138px)
}
.circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
}
</style>